<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row type="flex" class="h-100">
			<cl-biz-toolbar v-model="currBiz.biz_id" @change="changeBiz" />
			<cl-flex1 class="h-100" style="overflow: hidden">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex" class="pb-1">
							<span class="title">{{ currBiz.biz_name }}</span>
							<cl-flex1 />
							<div>
								<cl-filter-group v-model="search">
									<cl-filter label="品牌">
										<cl-select
											v-model="search.bra_id"
											placeholder="全部"
											clearable
											filterable
											multiple
											collapse-tags
											@change="refresh()"
										>
											<el-option
												v-for="item in bizRefData.brand"
												:key="item.bra_id"
												:label="item.bra_name"
												:value="item.bra_id"
											/>
										</cl-select>
									</cl-filter>
								</cl-filter-group>
								<el-button
									type="primary"
									style="margin-left: 30px"
									icon="el-icon-plus"
									@click="add"
									size="small"
								>
									添加定金
								</el-button>
							</div>
						</el-row>
					</template>
					<cl-table class="list" v-bind="table">
						<cl-empty slot="empty" />
						<template #column-opt="{ scope: { row } }">
							<div class="flex flex-align-start">
								<el-button type="primary" @click="edit(row)">修改</el-button>
								<el-button type="danger" @click="del(row)"> 删除 </el-button>
							</div>
						</template>
					</cl-table>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
		</el-row>
		<!-- 添加定金 -->
		<ear-config-form ref="form" @confirm="refresh" />
	</cl-crud>
</template>
<script>
import EarConfigForm from "./components/ear-config-form";
export default {
	name: "SetEarnestEarConfig",
	components: {
		EarConfigForm
	},
	data() {
		return {
			table: {
				"context-menu": ["refresh"],
				props: {
					maxHeight: 500
				},
				columns: [
					{
						type: "index",
						label: "#",
						align: "center",
						width: 50,
						fixed: true
					},
					{
						label: "事业部",
						prop: "biz_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "品牌",
						prop: "bra_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "定金金额（￥）", prop: "deposit", width: 120 },
					{ label: "定金数", prop: "deposit_num", width: 110 },
					{ label: "操作", prop: "opt", width: 150, fixed: "right" }
				]
			},

			currBiz: {
				biz_id: ""
			},
			search: {
				bra_id: []
			},
			load: false
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.currBiz;
			return this.getBizRefData(biz_id);
		}
	},
	methods: {
		async init() {
			const { biz_id } = this.currBiz;
			this.getBizRefBrand(biz_id);
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.config)
				.set("dict", {
					// 分页参数
					api: {
						page: "depositList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(biz_id, reset = true) {
			biz_id && (this.currBiz.biz_id = biz_id);
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.load = true;
			this.$refs.crud.refresh(params);
		},
		async onRefresh(params, { next, render, done }) {
			if (!this.load) {
				done();
				return;
			}
			const { biz_id } = this.currBiz;
			let query = {
				...params,
				// ...this.search,
				biz_id,
				show_type: 1
			};
			const { data, ...args } = await next(query);
			render(data, { ...query, ...args });
		},
		changeBiz(v) {
			this.currBiz = { ...v };
			this.search.bra_id = [];
			this.init();
			this.$nextTick(() => {
				this.refresh();
			});
		},
		//删除
		del({ id }) {
			this.confirm("此操作将删除该定金, 是否继续?")
				.then(() => {
					this.$service.config.depositDel({ id }).then(res => {
						this.refresh();
						this.$message.success("删除成功!");
					});
				})
				.catch(() => {});
		},
		// 修改
		edit(row) {
			this.$refs.form.open(true, row);
		},
		add() {
			this.$refs.form.open(false);
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	font-size: 18px;
}
</style>
